<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body>
    <!-- 
        需求1： 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大十倍
        需求2： 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
        自定义指令总结：
            一、定义语法：
                    (1).局部指令：
                            new Vue({                                     new Vue({                                                           
                                directives:{指令名：配置对象}    或           directives{指令名(element,binding){  }}
                            })                                             })
                                                                   
                    (2).全局指令：
                            Vue.directive('指令名'，配置对象)    或   Vue.directive('指令名'，回调函数)                                                     
            二、配置对象中常用的3个回调：
                    (1).bind: 指令与元素成功绑定时调用。  
                    (2).inserted: 指令所在元素被插入页面时调用。
                    (3).update： 指令所在模板结构被重新解析时调用。  
                    
            三、备注：
                  1、指令定义时不加v-，但使用时要加v-:
                  2、指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
     -->
    <!--准备好一个容器-->
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <!-- <h2>放大十倍后的n值是：<span v-big-number="n"></span></h2> -->
        <h2>放大十倍后的n值是：<span v-big="n"></span></h2>
            <button @click="n++">点我n+1</button>
            <hr/>
            <input type="text" v-fbind:value="n">
    </div>


    <div id="root2">
        <input type="text" v-fbind:value="x">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    // 声明一个全局的指令--fbind是个对象
    /* Vue.directive('fbind',{
                // 指令与元素成功绑定时会被调用(一上来)  
                 bind(element,binding){
                    element.value = binding.value
                    
                 },
                 // 指令所在元素被插入页面时被调用
                 inserted(element,binding){
                     // 获取焦点
                     element.focus()
                  
                 },
                 // 指令所在的模板被重新解析时
                 update(element,binding) {
                    element.value = binding.value
                 },
            }) */

                // // 声明一个全局的指令--big是个函数
      /*       Vue.directive('big',function(element,binding){    
            element.innerText = binding.value * 10 // element.innerText 改变元素中文本的值   binding--绑定的元素的详细信息
            console.log('big',this); // 注意此处的this是window
            },) */



    new Vue({
        el:'#root',
        data:{
            n:1
        },
        // 在该配置项中自定义指令
        directives:{
            // big函数何时会被调用？ 1、指令与元素成功绑定时会被调用(一上来) 2、指令所在的模板被重新解析时
           /*  'big-number'(element,binding){          
              element.innerText = binding.value * 10 // element.innerText 改变元素中文本的值   binding--绑定的元素的详细信息          
            }, */
            big(element,binding){
                 /* 验证是否是真正的dom */ 
            //   console.dir(a); -- span
            //   console.log(a instanceof HTMLElement);  -- true
              element.innerText = binding.value * 10 // element.innerText 改变元素中文本的值   binding--绑定的元素的详细信息
            console.log('big',this); // 注意此处的this是window
            },
            fbind:{
                // 指令与元素成功绑定时会被调用(一上来)  
                 bind(element,binding){
                    element.value = binding.value
                    
                 },
                 // 指令所在元素被插入页面时被调用
                 inserted(element,binding){
                     // 获取焦点
                     element.focus()
                  
                 },
                 // 指令所在的模板被重新解析时
                 update(element,binding) {
                    element.value = binding.value
                 },
            }

        }
    })


   
</script>
</html>